<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>
<body>
	<div>前后端交互</div>
	<script type="text/javascript" src="js/jquery.js"></script>
	<script type="text/javascript">
		/**
			前后端交互-异步编程与Promise概述
		*/
		// 传统的Ajax调用接口！
		// $.ajax({
		// 	url: 'http://localhost:3000/data',
		// 	success(data) {
		// 		console.log(data)
		// 	}
		// })

		// 改动
		// var ret = '---'
		// $.ajax({
		// 	url: 'http://localhost:3000/data',
		// 	success(data) {
		// 		ret = data;
		// 		console.log(ret) // 
		// 	}
		// })

		// console.log(ret) // ---
		// Ajax的调用是异步处理的 因为当程序执行到25行的时候，变成了异步编程，这个时候，success函数还没有被执行，所以读取不到里面的内容，所以控制台中打印的是 ---   只能在回调函数才能得到最终的结果！


		// -------------------------------
		// ·多次异步调用的结果顺序不确定
		// 可能路由的代码中有延时的函数！
		// 代码的执行顺序不能依赖于代码的书写的顺序
		// $.ajax({
		// 	url: 'http://localhost:3000/data',
		// 	success(data) {
		// 		console.log(data) // 
		// 	}
		// })
		// $.ajax({
		// 	url: 'http://localhost:3000/data1',
		// 	success(data) {
		// 		console.log(data) // 
		// 	}
		// })

		// $.ajax({
		// 	url: 'http://localhost:3000/data2',
		// 	success(data) {
		// 		console.log(data) // 
		// 	}
		// })

		// --------------------------------------
		// 异步调用结果如果存在依赖需要嵌套
		// 通过回调函数的嵌套来保证这三个异步任务的执行顺序！
		$.ajax({
			url: 'http://localhost:3000/data',
			success(data) {
				console.log(data) // 
				$.ajax({
					url: 'http://localhost:3000/data1',
					success(data) {
						console.log(data) // 
							$.ajax({
							url: 'http://localhost:3000/data2',
							success(data) {
								console.log(data) // 
							}
						})
					}
				})
			}
		})
	</script>
</body>
</html>